<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="我的订单" left-arrow></Base-Navbar>

    <div class="container">
      <!-- 钱包信息 -->
      <div class="mb-10">
        <Base-Wallet-Info></Base-Wallet-Info>
      </div>

      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab v-model:index="tabIndex1"></Base-Tab>
      </div>

      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab
          :type="2"
          :tabs="selects.orderStatus"
          @change="getOrderList"
          v-model:index="tabIndex2"
          v-model:value="tabValue2"
          v-model:key="tabKey2"
        ></Base-Tab>
      </div>

      <!-- 订单列表 -->
      <div class="box opacity">
        <ul class="list">
          <li class="item" v-for="(v, i) in orders" :key="i">
            <order-item @refresh="getOrderList" :v="v"></order-item>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'
import selects from 'js/selects'

import orderItem from '../components/order_item.vue'

const route = useRoute()

const tabIndex1 = ref(0)
const tabIndex2 = ref(Number(route.query.tabIndex))
const tabValue2 = ref(route.query.tabValue)
const tabKey2 = ref(route.query.tabKey)

const orders = ref([])

getOrderList()

// 获取订单列表
async function getOrderList() {
  const key = tabKey2.value
  const value = tabValue2.value

  const params = {
    [key]: value,
  }

  if (key === 'orderstate') {
    if (value === 3) {
      params.shippingstate = 3
    }
  } else if (key === 'shippingstate') {
    if (value === 0) {
      params.paystate = 1
    }
  } else if (key === 'paystate') {
  }

  const { code, data } = await api.getOrderList(params)

  if (code === 1) {
    orders.value = data.data
  }
}
</script>

<style lang="scss" scoped></style>
